<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>ajax全接触demo01</title>
	<style>
	body,input,select,button,h1{
		font-size: 28px;
		line-height: 1.7;
	}

	</style>
</head>
<body>

<h1>员工查询</h1>

<label>请输入员工编号：</label>
<input type="text" id="keyword" /> 
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName"></input><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber"></input><br>
<label>请选择员工性别：</label>
<select id="staffSex">
	<option>男</option>
	<option>女</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob"></input><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script>
$(document).ready(function(){
	$("#search").click(function(){
		$.ajax({
			type:"GET",
			url:"http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number="+$("#keyword").val,
			dataType:"json",
			success:function(data){
				if (data.success) {
					$("#searchResult").html(data.msg);
				}else{
					$("#searchResult").html("出现错误："+data.msg);
				}
			},
			error:function(jqXHR){
				alert("发生错误:"+jqXHR.status);
			},
		});
	});

	$("#save").click(function(){
		$.ajax({
			type:"POST",
			url:"serverjson.php",
			data:{
				name:$("#staffName").val(),
				number:$("#staffNumber").val(),
				sex:$("#staffSex").val(),
				job:$("#staffJob").val()
			}
			dataType: "json",
			success:function(data){
				if (data.success) {
					$("#createResult").html(data.msg);
				}else{
					$("#createResult").html("出现错误："+data.msg);
				}
			},
			error:function(jqXHR){
				alert("发生错误:"+jqXHR.status);
			},
		});
	});
});


</script>
</body>
</html>